<template>
	<div class="theme">
		<div style="padding: 0px 15px;padding-top: 15px;float: right;" @click="$router.push({path: '/News'})">
			<van-icon :name="img" size="26" />
		</div>
		<div class="overlay nav-btm headTop">
			<div class="overlay-content scrolling">
				<div style="padding: 0px 15px;padding-bottom: 20px;" @click="$router.push({path: '/UpdateMine'})">
					<van-row>
						<van-col span="7">
							<van-image width="80" height="80" src="https://img.yzcdn.cn/vant/cat.jpeg" round />
						</van-col>
						<van-col span="15" style="padding-top: 5px;">
							<div style="font-size: 20px;font-weight: 600;">Hi</div>
							<div style="font-size: 16px;padding-top: 5px;font-weight: 600;">
								<div class="van-ellipsis" v-text="user.nickName ? user.nickName : ''">天空之城</div>
							</div>
							<div style="font-size: 14px;padding-top: 5px;color: #999999;">
								<span v-text="'ID:' + user.uuid">ID:123456789</span>
								<span v-text="user.userName" style="padding-left: 10px;"></span>
							</div>
						</van-col>
						<van-col span="2" style="padding: 35px 0px;">
							<van-icon name="arrow" color="#7D7E80" size="20" />
						</van-col>
					</van-row>
				</div>
				<div style="padding: 0px 15px;">
					<div style="background: #c7e6e4;padding: 20px 0px;border-bottom: 8px solid #abd6ed;border-radius: 5px;-moz-box-shadow:2px 2px 5px #abd6ed; -webkit-box-shadow:2px 2px 5px #abd6ed; box-shadow:2px 2px 5px #abd6ed;" align="center">
						<van-row type="flex" justify="center" style="color: #7D7E80;">
							<van-col span="12">
								<div style="font-size: 13px;">余额(USDT)</div>
								<div class="money" v-text="money.availableNum ? parseFloat(money.availableNum).toFixed(5).slice(0,-1) : '0.0000'">1234.5678</div>
							</van-col>
							<van-col span="12">
								<div style="font-size: 13px;">锁仓(USDT)</div>
								<div class="money" v-text="money.freezeNum ? parseFloat(money.freezeNum).toFixed(5).slice(0,-1) : '0.0000'">1234.5678</div>
							</van-col>
						</van-row>
					</div>
				</div>
				<div style="padding: 20px 15px;font-size: 15px;">
					<div>
						<van-row @click="$router.push({path: '/Recharge'})" style="padding: 8px 0px;">
							<van-col span="3">
								<img src="../assets/images/mine1.png" width="30" height="30" />
							</van-col>
							<van-col span="13" style="position: relative;left: -5px;top: 5px;">
								<span>区块充值</span>
							</van-col>
							<van-col span="8" style="position: relative;top: 8px;text-align: right;right: 10px;">
								<van-icon name="arrow" color="#7D7E80" size="16" />
							</van-col>
						</van-row>
						<div style="border-bottom: 1px solid #c7e6e4;width: 90%;float: right;"></div>
					</div>
					<div>
						<van-row @click="toExt" style="padding: 8px 0px;">
							<van-col span="3">
								<img src="../assets/images/mine2.png" width="30" height="30" />
							</van-col>
							<van-col span="13" style="position: relative;left: -5px;top: 5px;">
								<span>提币转账</span>
							</van-col>
							<van-col span="8" style="position: relative;top: 8px;text-align: right;right: 10px;">
								<van-icon name="arrow" color="#7D7E80" size="16" />
							</van-col>
						</van-row>
						<div style="border-bottom: 1px solid #c7e6e4;width: 90%;float: right;"></div>
					</div>
					<div>
						<van-row @click="$router.push({path: '/Share'})" style="padding: 8px 0px;">
							<van-col span="3">
								<img src="../assets/images/mine3.png" width="30" height="30" />
							</van-col>
							<van-col span="13" style="position: relative;left: -5px;top: 5px;">
								<span>我的分享</span>
							</van-col>
							<van-col span="8" style="position: relative;top: 8px;text-align: right;right: 10px;">
								<van-icon name="arrow" color="#7D7E80" size="16" />
							</van-col>
						</van-row>
						<div style="border-bottom: 1px solid #c7e6e4;width: 90%;float: right;"></div>
					</div>
					<div>
						<van-row @click="$router.push({path: 'billManagement'})" style="padding: 8px 0px;">
							<van-col span="3">
								<img src="../assets/images/mine4.png" width="30" height="30" />
							</van-col>
							<van-col span="13" style="position: relative;left: -5px;top: 5px;">
								<span>账单管理</span>
							</van-col>
							<van-col span="8" style="position: relative;top: 8px;text-align: right;right: 10px;">
								<van-icon name="arrow" color="#7D7E80" size="16" />
							</van-col>
						</van-row>
						<div style="border-bottom: 1px solid #c7e6e4;width: 90%;float: right;"></div>
					</div>
					<div>
						<van-row @click="OpenKf" style="padding: 8px 0px;">
							<van-col span="3">
								<img src="../assets/images/mine5.png" width="30" height="30" />
							</van-col>
							<van-col span="13" style="position: relative;left: -5px;top: 5px;">
								<span>客服中心</span>
							</van-col>
							<van-col span="8" style="position: relative;top: 8px;text-align: right;right: 10px;">
								<van-icon name="arrow" color="#7D7E80" size="16" />
							</van-col>
						</van-row>
						<div style="border-bottom: 1px solid #c7e6e4;width: 90%;float: right;"></div>
					</div>
					<div>
						<van-row @click="$router.push({path: '/Setting'})" style="padding: 8px 0px;">
							<van-col span="3">
								<img src="../assets/images/mine6.png" width="30" height="30" />
							</van-col>
							<van-col span="13" style="position: relative;left: -5px;top: 5px;">
								<span>个人设置</span>
							</van-col>
							<van-col span="8" style="position: relative;top: 8px;text-align: right;right: 10px;">
								<van-icon name="arrow" color="#7D7E80" size="16" />
							</van-col>
						</van-row>
						<div style="border-bottom: 1px solid #c7e6e4;width: 90%;float: right;"></div>
					</div>
				</div>
			</div>
			<van-popup v-model="show" style="border-radius: 5px;width: 80%;">
				<div style="padding: 10px 0px;background-color: #43add5;color: white;font-size: 14px;text-align: center;">联系客服</div>
				<div style="background-color: white;font-size: 13px;padding: 20px 0px;">
					<div style="padding:10px 20px;">
						<span>Q&nbsp;Q：</span>
						<span v-text="kf.qq ? kf.qq : '10000'">10000</span>
						<span style="color: #43ADD5;float: right;" class="copy" :data-clipboard-text="kf.qq ? kf.qq : '暂无QQ'" @click="copy">复制</span>
					</div>
					<div style="padding:10px 20px;">
						<span>微信：</span>
						<span v-text="kf.wx ? kf.wx : 'tencent'">tencent</span>
						<span style="color: #43ADD5;float: right;" @click="copy2" class="copy2" :data-clipboard-text="kf.wx ? kf.wx : '暂无微信'">复制</span>
					</div>
					<div style="padding:10px 20px;">
						<span>TEL：</span>
						<span v-text="kf.tel ? kf.tel : '1380013800'">1380013800</span>
						<span style="color: #43ADD5;float: right;" @click="copy3" class="copy3" :data-clipboard-text="kf.tel ? kf.tel : '暂无手机号码'">复制</span>
					</div>
				</div>
			</van-popup>
		</div>
	</div>
</template>

<script>
	let _this;
	import { base } from './../utils/api';
	export default {
		name: 'Mine',
		components: {},
		props: {},
		data() {
			return {
				img: require('./../assets/images/xx.png'),
				show: false,
				user: [],
				money: [],
				kf: []
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			toExt() {
				base.getIsTradePass().then(res => {
					if(res.code == 200) {
						if(res.data == 1) {
							this.$router.push({
								name: 'Extract'
							})
						} else {
							this.$toast(res.msg);
						}
					}
				})
			},
			getUser() {
				base.getUser_info().then(res => {
					this.user = res.data;
				})
			},
			getCoin_accounts() {
				base.getMyInfo().then(res => {
					this.money = res.data;
				})
			},
			onClickLeft() {
				this.$router.push({
					path: '/'
				});
			},
			OpenKf() { // 打开客服中心
				base.getCustomer_service().then(res => {
					if(res.code == 200) {
						this.kf = res.data.records[0];
						this.show = true;
					} else {
						this.$toast(res.msg);
					}
				})
			},
			copy() {
				let clipboard = new ClipboardJS('.copy')
				clipboard.on('success', e => { 
					this.$toast('复制成功');
					clipboard.destroy();
				})
				clipboard.on('error', e => { 
					this.$toast('复制失败');
					clipboard.destroy();
				})
			},
			copy2() {
				let clipboard = new ClipboardJS('.copy2')
				clipboard.on('success', e => { 
					this.$toast('复制成功');
					clipboard.destroy();
				})
				clipboard.on('error', e => { 
					this.$toast('复制失败');
					clipboard.destroy();
				})
			},
			copy3() {
				let clipboard = new ClipboardJS('.copy3')
				clipboard.on('success', e => { 
					this.$toast('复制成功');
					clipboard.destroy();
				})
				clipboard.on('error', e => { 
					this.$toast('复制失败');
					clipboard.destroy();
				})
			}
		},
		created() {

		},
		mounted() {
			this.getUser();
			this.getCoin_accounts();
			localStorage.nav = 1;
		},
		destroyed() {

		},
		filters: {}
	};
</script>

<style lang="less" scoped>
	.money {
		padding-top: 10px;
		font-size: 18px;
		color: #EE0A24;
	}
	
	/deep/ .van-nav-bar {
		height: 0px;
	}
</style>